<!--实时客户支付协议管理审核页面-->
<template>
  <div class="app-container">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="160px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="发起参与机构号：" prop="sender">
            <el-input v-model="submitParams.sender" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本行类型：" prop="bankType">
            <el-select style="width: 100%" v-model="submitParams.bankType" placeholder="">
              <el-option
                v-for="dict in dictMap.BRNO_TYPE_351"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="发起参与机构名称：" prop="senderName">
            <el-input v-model="submitParams.senderName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="接收参与机构号：" prop="recver">
            <el-input v-model="submitParams.recver" @change="getBankInf('recver', submitParams.recver)" />
          </el-form-item>
        </el-col>
        <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('recver')">
          行名行号查询
        </el-button>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="接收参与机构名称：" prop="recverName">
            <el-input v-model="submitParams.recverName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="变更方式：" prop="chgType">
            <el-select style="width: 100%" disabled v-model="submitParams.chgType" placeholder="">
              <el-option
                v-for="dict in dictMap.CHG_CODE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="协议类型：" prop="contractType">
            <el-select style="width: 100%" disabled v-model="submitParams.contractType" placeholder="">
              <el-option
                v-for="dict in dictMap.ContractTypeCode"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="4">
          <el-form-item label="地域标识：" prop="regionid">
            <el-input v-model="submitParams.regionid" @change="getbase('RegionId')" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-input v-model="submitParams.regionidDesc" disabled />
        </el-col>
        <el-col :span="4">
          <el-button icon="el-icon-search" plain type="primary" @click="openBasedataDialog('RegionId')">
            请选择
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-form-item label="授权模式：" prop="authModel">
            <el-select style="width: 100%" v-model="submitParams.authModel" placeholder="">
              <el-option
                v-for="dict in dictMap.AuthModelCode"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码：" prop="uniformScCode">
            <el-input v-model="submitParams.uniformScCode" @change="checkcreditcode('uniformScCode')" />
          </el-form-item>
        </el-col>
        <el-button icon="el-icon-search" plain type="primary" @click="openCreditCodeDialog('uniformScCode')">
          查询
        </el-button>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="合同（协议）号：" prop="protoId">
            <el-input type="textarea" v-model="submitParams.protoId" maxlength="60" show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申请号：" prop="reqIdenty">
            <el-input v-model="submitParams.reqIdenty" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="客户号：" prop="custId">
            <el-input v-model="submitParams.custId" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="客户名称：" prop="custName">
            <el-input v-model="submitParams.custName" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="收款人名称：" prop="payeeName">
            <el-input v-model="submitParams.payeeName" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="缴费人名称：" prop="payerName">
            <el-input v-model="submitParams.payerName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="缴费人账户类型：" prop="payerActnoType">
            <el-select style="width: 100%" v-model="submitParams.payerActnoType" placeholder="">
              <el-option
                v-for="dict in dictMap.ACT_TYPE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴费人账号：" prop="payerActno">
            <el-input v-model="submitParams.payerActno" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="缴费人开户行行号：" prop="payerActnoBrno">
            <el-input
              v-model="submitParams.payerActnoBrno"
              @change="getBankInf('payerActnoBrno', submitParams.payerActnoBrno)"
            />
          </el-form-item>
        </el-col>
        <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('payerActnoBrno')">
          行名行号查询
        </el-button>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="缴费人开户行行名：" prop="payerActnoName">
            <el-input v-model="submitParams.payerActnoName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="缴费人证件类型：" prop="payerIdType">
            <el-select style="width: 100%" v-model="submitParams.payerIdType" placeholder="">
              <el-option
                v-for="dict in dictMap.Id_Type_Code"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴费人证件号码：" prop="payerIdNo">
            <el-input v-model="submitParams.payerIdNo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话：" prop="payerTel">
            <el-input v-model="submitParams.payerTel" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="地址：" prop="payerAddr">
            <el-input type="textarea" v-model="submitParams.payerAddr" maxlength="60" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="协议到期日期：" prop="contractDueDate">
            <el-date-picker
              v-model="submitParams.contractDueDate"
              type="date"
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="协议签署日期：" prop="contractSignDate">
            <el-date-picker
              v-model="submitParams.contractSignDate"
              type="date"
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="生效日期：" prop="effectDate">
            <el-date-picker
              v-model="submitParams.effectDate"
              type="date"
              value-format="yyyyMMdd"
              placeholder=""
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="费项数目：" prop="paymentNum">
            <el-input v-model="submitParams.paymentNum" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="一次扣费限额币种：" prop="limitCurcd">
            <el-input v-model="submitParams.limitCurcd" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="一次扣费限额：" prop="limitAmt">
            <ht-amount-input v-model="submitParams.limitAmt" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="扣款周期内限制笔数：" prop="cycLimitNum">
            <BrnoInput v-model="submitParams.cycLimitNum" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="扣款周期内扣费限额币种：" prop="cycLimitCurcd">
            <el-input v-model="submitParams.cycLimitCurcd" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="扣款周期内扣费限额：" prop="cycLimitAmt">
            <ht-amount-input v-model="submitParams.cycLimitAmt" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="扣款时间单位：" prop="timeUnit">
            <el-select style="width: 100%" v-model="submitParams.timeUnit" placeholder="">
              <el-option
                v-for="dict in dictMap.TimeUnitCode"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="扣款时间步长：" prop="timeStep">
            <BrnoInput v-model="submitParams.timeStep" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="扣款时间描述：" prop="timeDesc">
            <el-input type="textarea" v-model="submitParams.timeDesc" maxlength="120" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附言：" prop="addInfo">
            <el-input type="textarea" v-model="submitParams.addInfo" maxlength="256" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="协议附加数据：" prop="contractAddInfo">
            <el-input type="textarea" v-model="submitParams.contractAddInfo" maxlength="1000" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>费项代码</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-form-item label="费项代码：" prop="payCode">
              <el-input v-model="submitParams.payCode" @change="checkpaycode('payCode')" />
            </el-form-item>
          </el-col>
          <el-button icon="el-icon-search" plain type="primary" @click="openPayCodeDialog('payCode')">
            入网机构与费项关系查询
          </el-button>
        </el-row>

        <el-row type="flex">
          <ht-table
            ref="dataTable"
            :showSerialNumber="false"
            :multi-select="false"
            :opButtonList="opButtonList"
            :tableBindColumns="tableBindColumns"
            :showRightToolbar="false"
          >
            <template v-slot:operate>
              <el-table-column
                label="操作"
                align="center"
                width="300"
                fixed="right"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <ht-button-group
                    :buttonList="[
                      {
                        label: '删除',
                        doFunc: () => {
                          remove(scope.row, scope.$index);
                        },
                      },
                    ]"
                  />
                </template>
              </el-table-column>
            </template>
          </ht-table>
        </el-row>
      </el-card>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="isLoading">提交</el-button>
      <el-button type="warning" @click="refresh" :loading="isLoading">重置</el-button>
    </div>
    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
    <base-data-dialog ref="basedataDialog" @confirm="confirmData"></base-data-dialog>
    <social-credit-code-dialog
      ref="socialCreditCodeDialog"
      @confirm="confirmCreditCode"
      :dictMap="dictMap"
    ></social-credit-code-dialog>
    <pay-code-dialog
      ref="payCodeDialog"
      @confirm="confirmPayCode"
      :dictMap="dictMap"
      :initData="initData"
    ></pay-code-dialog>

  </div>
</template>
<script>
import { query, submit } from "@/api/cnaps/bepsDraft/client_pay_pact_manage_entry";
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import BaseDataDialog from "@/views/components/BasedataDialog";
import { getBasedata } from "@/api/cnaps/common/basedata";
import SocialCreditCodeDialog from "./dialog/SocialCreditCodeDialog.vue";
import payCodeDialog from "./dialog/PayCodeDialog.vue";
import HtAmountInput from "@/views/components/HtAmountInput";
import BrnoInput from "@/views/components/BrnoInput/index.vue";
export default {
  name: "clientPayPactManageEntry",
  mixins: [listPageMixin],
  components: { HtAmountInput, BankBranchDialog, BaseDataDialog, SocialCreditCodeDialog, payCodeDialog,
    BrnoInput
  },
  computed: {},
  data() {
    var checkNum = (rule, value, callback) => {

      if (!Number(value)) {
        callback(new Error("只能输入数字"));
      }

      callback();
    };

    return {
      // 是否显示弹出层
      open: false,
      isLoading: false,
      initData: {},
      tableBindColumns: [{ label: `费项代码`, prop: "dataValue", align: "center" }],
      opButtonList: () => {
        return [
          {
            label: "新增",
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:expandConfInfo:add",
            actionType: "add",
            clickFun: () => {
              this.addRow();
            },
          },
        ];
      },
      // 录入参数
      submitParams: {
        sender: "",
        bankType: "1",
        senderName: "",
        recver: "",
        recverName: "",
        chgType: "CC00",
        contractType: "CO01",
        regionid: "",
        uniformScCode: "",
        protoId: "",
        reqIdenty: "",
        custName: "",
        payeeName: "",
        payerName: "",
        payerActnoType: "",
        payerActno: "",
        payerActnoBrno: "",
        payerActnoName: "",
        payerIdType: "",
        payerIdNo: "",
        payerTel: "",
        payerAddr: "",
        contractDueDate: "",
        contractSignDate: "",
        effectDate: "",
        paymentNum: "",
        limitCurcd: "CNY",
        limitAmt: "",
        cycLimitNum: "",
        cycLimitCurcd: "CNY",
        cycLimitAmt: "",
        timeUnit: "",
        timeStep: "",
        timeDesc: "",
        addInfo: "",
        contractAddInfo: "",
        payCode: "",
        authModel: ""
      },
      searchFormDictList: [
        "BRNO_TYPE_351",
        "CHG_CODE",
        "ContractTypeCode",
        "CustomerAccountTypeCode",
        "Id_Type_Code",
        "TimeUnitCode",
        "ACT_TYPE",
        "AuthModelCode"
      ],
      rules: {
        sender: [{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        senderName: [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        recver: [{ required: true, message: "不能为空", trigger: "change" },{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        chgType: [{ required: true, message: "不能为空", trigger: "change" }],
        contractType: [{ required: true, message: "不能为空", trigger: "change" }],
        regionid: [{ required: true, message: "不能为空", trigger: "change" }],
        uniformScCode: [{ required: true, message: "不能为空", trigger: "change" },{ max: 18, message: "长度最大为18位", trigger: "blur" }],
        protoId: [{ required: true, message: "不能为空", trigger: "blur" }],
        custName: [{ required: true, message: "不能为空", trigger: "blur" },{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        payerName: [{ required: true, message: "不能为空", trigger: "blur" },{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        payerActnoType: [{ required: true, message: "不能为空", trigger: "change" }],
        payerActno: [{ required: true, message: "不能为空", trigger: "blur" },{ max: 32, message: "长度最大为32位", trigger: "blur" }],
        payerActnoBrno: [{ required: true, message: "不能为空", trigger: "change" },{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        payerActnoName : [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        payerIdNo: [{ required: true, message: "不能为空", trigger: "blur" },{ max: 35, message: "长度最大为35位", trigger: "blur" }],
        paymentNum: [{ required: true, message: "不能为空", trigger: "blur" },{ max: 2, message: "长度最大为2位", trigger: "blur" },{validator: checkNum, trigger: "blur" }],
        reqIdenty:[{ max: 64, message: "长度最大为64位", trigger: "blur" }],
        custId:[{ max: 32, message: "长度最大为32位", trigger: "blur" }],
        payeeName:[{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        payerTel:[{ max: 30, message: "长度最大为30位", trigger: "blur" }],
        cycLimitNum:[{ max: 8, message: "长度最大为8位", trigger: "blur" }],
        timeStep:[{ max: 3, message: "长度最大为3位", trigger: "blur" }],


      },
    };
  },
  created() {
    query().then((res) => {
      this.$set(this.submitParams, "sender", res.result.bkCode);
      this.$set(this.submitParams, "senderName", res.result.bkName);
    });
  },
  mounted() {},

  methods: {
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.submitParams.listPaymentCode = this.$refs.dataTable.dataList;
          this.loading = true;
          submit(this.submitParams)
            .then((response) => {
              this.msgSuccess("提交成功");
              this.$alert(`CORE_ID: ${response.result.rspId}`, "生成交易流水号", {
                confirmButtonText: "确定",
                //刷新一下查询列表 TODO
                callback: (action) => {
                },
              });
              this.refresh();
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      this.$set(this.$refs.dataTable, "dataList", []);
    },

    //增加行
    addRow() {
      if (this.submitParams.payCode != "") {
        let list = {
          dataValue: this.submitParams.payCode,
        };
        this.$refs.dataTable.dataList.push(list);
      }
    },
    remove(row, index) {
      this.$refs.dataTable.dataList.splice(index, 1);
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      console.log(fromFlag, 111111);
      if (fromFlag == "recver") {
        this.$set(this.submitParams, "recver", row.bankCode);
        this.$set(this.submitParams, "recverName", row.orgFullname);
      } else if (fromFlag == "payerActnoBrno") {
        this.$set(this.submitParams, "payerActnoBrno", row.bankCode);
        this.$set(this.submitParams, "payerActnoName", row.orgFullname);
      }
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },

    //回车取行号信息
    getBankInf(searchType, bankCode) {
      getBankInfByBankCode(bankCode).then((response) => {
        if (response.code == "S" && response.result !== undefined) {
          switch (searchType) {
            case "recver":
              this.$set(this.submitParams, "recver", response.result.bankCode);
              this.$set(this.submitParams, "recverName", response.result.orgFullname);
              break;
            case "payerActnoBrno":
              this.$set(this.submitParams, "payerActnoBrno", response.result.bankCode);
              this.$set(this.submitParams, "payerActnoName", response.result.orgFullname);
              break;
          }
        } else {
          this.msgError("查无此行号");
          switch (searchType) {
            case "recver":
              this.$set(this.submitParams, "recverName", null);
              break;
            case "payerActnoBrno":
              this.$set(this.submitParams, "payerActnoName", null);
              break;
          }
        }
      });
    },

    openBasedataDialog(dataType = "") {
      this.$refs.basedataDialog.show(dataType);
    },

    confirmData(fromFlag, row) {
      this.$set(this.submitParams, "regionid", row.dataValue);
      this.$set(this.submitParams, "regionidDesc", row.dataDesc);
    },

    //回车获取basedata值
    getbase(dataType) {
      const dataValue = this.submitParams.regionid;
      if (dataValue === "" || dataValue === null || dataValue === undefined) {
        this.$set(this.submitParams, "regionidDesc", null);
        return;
      }

      getBasedata(dataType, dataValue)
        .then((response) => {
          if (response.code == "S" && response.result !== undefined) {
            this.$set(this.submitParams, "regionid", response.result.dataValue);
            this.$set(this.submitParams, "regionidDesc", response.result.dataDesc);
          } else {
            this.msgSuccess("找不到对应的字典项");
            this.$set(this.submitParams, "regionid", null);
            this.$set(this.submitParams, "regionidDesc", null);
          }
        })
        .catch((err) => {
          this.$set(this.submitParams, "regionid", null);
          this.$set(this.submitParams, "regionidDesc", null);
        });
    },

    //社会信用代码
    confirmCreditCode(fromFlag, row) {
      this.$set(this.submitParams, "uniformScCode", row.acsOrgId);
    },
    //查询
    openCreditCodeDialog() {
      this.$refs.socialCreditCodeDialog.show();
    },

    checkcreditcode() {
      let stBrno = this.submitParams.stBrno;
      getBankInfByBankCode(stBrno)
        .then((response) => {
          if (response.code == "S" && response.result !== null) {
            this.$set(this.submitParams, "stBrno", response.result.bankCode);
            this.$set(this.submitParams, "stBrnoName", response.result.orgFullname);
          } else {
            this.msgError("无行名行号记录");
            this.$set(this.submitParams, "stBrnoName", null);
          }
        })
        .catch((err) => {
          this.$set(this.submitParams, "stBrnoName", null);
        });
    },

    //费项代码
    confirmPayCode(fromFlag, row) {
      this.$set(this.submitParams, "payCode", row.payCode);
    },
    //行名行号查询
    openPayCodeDialog() {
      this.initData = {
        regionid: this.submitParams.regionid,
        uniformScCode: this.submitParams.uniformScCode,
      };
      this.$refs.payCodeDialog.show();
    },

    checkpaycode() {
      let stBrno = this.submitParams.stBrno;
      getBankInfByBankCode(stBrno)
        .then((response) => {
          if (response.code == "S" && response.result !== null) {
            this.$set(this.submitParams, "stBrno", response.result.bankCode);
            this.$set(this.submitParams, "stBrnoName", response.result.orgFullname);
          } else {
            this.msgError("无行名行号记录");
            this.$set(this.submitParams, "stBrnoName", null);
          }
        })
        .catch((err) => {
          this.$set(this.submitParams, "stBrnoName", null);
        });
    },
    closeFn() {
      this.open = false;
      this.refresh();
    },
    show() {
      this.open = true;
    },
  },
};
</script>
<style>
.dialog-footer {
  margin: 10px 0;
  text-align: center;
}
.app-container {
  overflow: scroll;
}
</style>

